<template>
  <div>
    <c-title :hide="false"
             :text="'兑换中心'">
    </c-title>

    <div style="" class="bigsex">
      <van-tabs 
        :title-active-color="'var(--themeBaseColor)' || '#F15353'"
        line-width="15px"
        title-inactive-color="#00001C"
        :color="'var(--themeBaseColor)' || '#F15353'"
        v-model="active"
        @click="getData()">
        <!-- v-for="item in navigation"
                 :key="item.id" -->
        <van-tab :title="navigation[0].name"
                 v-if="!fun.isTextEmpty(navigation[0])">
          <div class="coupon-list" v-if="list && list.length > 0">
            <block v-for="(items, index) in list" :key="items.coupon_id">
              <coupon-cell :couponItem="items" :index="items.coupon_id" :couType="1">
                <template #numCount>
                  <div class="num-count flex flex-j-sb">
                    <div class="num-left">剩余数量：{{items.total}}</div>
                    <div class="num-wrap flex-a-c">
                      <span @click.stop="numberLeft(index,items.coupon_id,items.belongs_to_coupon.goods_ids)"
                      class="iconfont icon-store_reduceLine"
                      v-show="NumModel[index]>0"></span>
                      <input type="number"
                        v-model="NumModel[index]"
                        v-show="NumModel[index]>0"
                        disabled="disabled"
                        @click.stop />
                      <span @click.stop="numberRight(index,items.coupon_id,items.belongs_to_coupon.goods_ids,'',items.total)"
                      class="iconfont icon-store_plus"></span>
                    </div>
                  </div>
                </template>
              </coupon-cell>
            </block>
          </div>
          <van-empty description="暂无数据" v-else />
        </van-tab>
      </van-tabs>

    </div>
    <ul class="time"
        v-if="active==2">
      <li class="time_a"
          @click="show1 = true">
        {{ fun.isTextEmpty(start) ? "请选择入住日期" : start
              }}<span>入住</span>
      </li>
      <li class="time_b"
          v-if="!fun.isTextEmpty(end)">
        <span>{{ night_day }}晚</span>
      </li>
      <li class="time_c"
          @click="show2 = true">
        {{ fun.isTextEmpty(end) ? "请选择离店日期" : end }}<span>离开</span>
      </li>
    </ul>
    <div class="btn set-pc-style">
      <span class="btn-left flex-a-c">{{num>0?`已选择${num}张`:'请选择'}}</span>
      <div class="btn-right"
            @click="gotoExchange()">去兑换</div>
    </div>

    <!-- 时间弹窗 -->
    <van-popup v-model="show1"
               position="bottom"
               :overlay="true"
               style="position: fixed; height: 80%;">
      <date-picker type="入住"
                   :top="false"
                   @timeChange="acceptTime"
                   @close="close"></date-picker>
    </van-popup>
    <van-popup v-model="show2"
               position="bottom"
               :overlay="true"
               style="position: fixed; height: 80%;">
      <date-picker type="离店"
                   :top="false"
                   @timeChange="acceptTime"
                   @close="close"></date-picker>
    </van-popup>
  </div>
</template>

<script>
import index_controller from "./index_controller";

export default index_controller;
</script>

<style lang="scss" rel="stylesheet/scss" scoped>

.bigsex ::v-deep .van-tabs__line {
  bottom:21px;
}

//新样式
.coupon-list {
  margin: 10px 12px 0 12px;
  .num-count {
    font-size: 12px;
    color: #6E6E79;
  }
  .num-wrap {
    .icon-store_reduceLine,.icon-store_plus {
      font-size:26px;
      color:var(--themeBaseColor);
    }
    input {
      // line-height: 56rpx;
      width: 2rem;
      text-align: center;
      font-size: 28rpx;
      border: none;
    }
  }
}

.bigsex {
  padding-bottom: 6.25rem;
  box-sizing: border-box;
}


.time {
  position: fixed;
  width: 100%;
  padding: 0 1rem;
  bottom: 3rem;
  height: 2.75rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: solid 0.0625rem #ebebeb;
  background: #fff;

  .time_a,
  .time_c {
    font-size: 16px;
    font-weight: bold;

    span {
      font-size: 12px;
      margin-left: 0.375rem;
      color: #333;
      font-weight: normal;
    }
  }

  .time_b {
    span {
      font-size: 13px;
      border: solid 0.0625rem #ebebeb;
      border-radius: 1rem;
      padding: 0.125rem 0.625rem;
    }
  }
}

.btn {
  position: fixed;
  bottom: 0;
  background: #fff;
  display: flex;
  width: 100%;
  padding:8px 12px 8px 0;
  font-size: 14px;
  .btn-left {
    flex: 1;
    text-align: right;
    padding-right: 14px;
    color: #666;
    justify-content: flex-end;
    
  }

  .btn-right {
    font-size: 15px;
    line-height: 15px;
    background: var(--themeBaseColor);
    color: #fff;
    padding:12px 22px;
    display: block;
    border-radius: 20px;
  }
}

.addBtn {
  position: absolute;
  bottom: 0.625rem;
  right: 0.625rem;
  display: flex;

  .iconfont {
    width: 1.75rem;
    height: 1.75rem;
    line-height: 1.75rem;
    font-size: 26px;
    color: #f15353;
  }

  .icon-store_reduceLine {
    color: #aaa;
  }

  input {
    line-height: 1.75rem;
    width: 2rem;
    text-align: center;
    font-size: 12px;
    border: none;
  }
}
</style>
